import { useState, useEffect } from 'react'
import { useRoutes, useNavigate, useLocation } from 'react-router-dom'
import { routes } from 'router/config'
// import 'antd/dist/antd.css'
import { Badge, TabBar } from 'antd-mobile'
import { AppOutline, UnorderedListOutline } from 'antd-mobile-icons'
const tabs = [
  {
    key: '/home',
    title: '首页',
    icon: <AppOutline />,
    badge: Badge.dot,
  },
  {
    key: '/cart',
    title: '购物车',
    icon: <UnorderedListOutline />,
    badge: '5',
  },
  {
    key: '/edit',
    title: '富文本编辑器',
    icon: <UnorderedListOutline />,
    badge: '5',
  },
]
function App() {
  const [pathName, setPathName] = useState<string>('/home')
  const element = useRoutes(routes)
  const navigate = useNavigate()
  const location = useLocation()
  const setRouteActive = (v: any) => {
    console.log(v, 'v')
    setPathName(v)
    navigate(v)
  }

  // 监听路由
  useEffect(() => {
    setPathName(location.pathname)
    console.log('location:', location)
  }, [])

  return (
    <div className="App">
      <TabBar activeKey={pathName} onChange={(value) => setRouteActive(value)}>
        {tabs.map((item) => (
          <TabBar.Item key={item.key} icon={item.icon} title={item.title}></TabBar.Item>
        ))}
      </TabBar>
      {element}
    </div>
  )
}

export default App
